<template>
	<view :class="themeName">
		<view class="service" :style="{
			backgroundImage:`url(${$getImageUri('resource/image/shopapi/default/service_bg.jpg')})`
		}">

			<!-- Contain -->
			<view class="service-contain">
				<view class="flex code row-center">
					<u-image :src="serviceData.qr_code" width="400rpx" height="400rpx"></u-image>
				</view>
				<view class="flex lg m-t-20 row-center">
					{{ serviceData.title }}
				</view>

				<view class="p-t-20">
					<view class="br60 copy-btn flex row-center white lg">
						<text class="m-l-20" @click="saveCode">{{$zhTran('保存二维码')}}</text>
					</view>
				</view>

				<view class=" xs p-t-20 servtxt" v-if="serviceData.business_time">
					{{$zhTran('服务时间')}}: 
					<view class="fontxt">
						{{ serviceData.business_time }}
					</view>
				</view> 
				<view class="m-t-20 flex row-center xs servtxt" v-if="serviceData.phone">
					{{$zhTran('客服电话')}}：{{serviceData.phone}}
					<!-- #ifdef H5 -->
					<a class="br60 m-l-10 phone muted" :href="'tel:' + serviceData.phone">{{$zhTran('拨打')}}</a>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<view class="br60 m-l-10 phone muted" @click="showTelTips">{{$zhTran('拨打')}}</view>
					<!-- #endif -->
				</view>
			</view>
		</view>

		<u-modal :content="content" v-model="showPhoneCall" show-cancel-button :confirm-text='$zhTran("呼叫")'
			:confirm-color="themeColor" @confirm="onCall">
		</u-modal>

		<loading-view v-if="loading"></loading-view>
		<w-jishuzhichi class="jishuzhichi-nodata" />
	</view>
</template>


<script>
	import {
		copy
	} from "@/utils/tools.js";
	import {
		apiServiceConfig
	} from "@/api/store.js";
	export default {
		name: 'Service',

		data() {
			return {
				serviceData: {},
				showPhoneCall: false,
				content: this.$zhTran('即将打电话给'),
				loading: true
			}
		},

		methods: {
			getServiceConfigDataFun() {
				apiServiceConfig().then(res => {
					this.serviceData = this.$zhTran(res);
					//#ifndef H5
					this.downloadCode()
					//#endif
					setTimeout(() => {
						this.loading = false
					}, 100)
				}).catch(err => {
					this.loading = false
				})
			},

			// 下载图片
			downloadCode() {
				uni.downloadFile({
					url: this.serviceData.qr_code, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode == 200) {
							this.tempFilePath = res.tempFilePath
						}
					}
				});
			},

			saveCode() {
				//#ifdef H5
				this.$toast({
					title: this.$zhTran('长按图片保存')
				});
				//#endif
				//#ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.tempFilePath,
					success: res => {
						this.$toast({
							title: this.$zhTran('保存成功'),
							icon: 'success'
						});
					},
					fail: (err) => {
						this.$toast({
							title: this.$zhTran('保存失败')
						});
					}
				})
				//#endif
			},

			// 显示是否拨打电话弹窗
			showTelTips() {
				this.showPhoneCall = true;
				this.content = this.$zhTran('即将打电话给') + this.serviceData.phone
			},

			//打电话
			onCall() {
				uni.makePhoneCall({
					phoneNumber: this.serviceData.phone.toString()
				})

			},
		},

		onLoad() {
			this.getServiceConfigDataFun();

			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.servtxt {
		font-size: 30rpx;
		display:flex;
		justify-content: center;
		.fontxt{
			font-size: 30rpx;
			max-width: 220rpx;
			// border:solid 1px red;
		}
	}
	.service {
		width: 100vw;
		height: 100vh;
		background-size: 100% auto;
		overflow: hidden;


		&-contain {
			width: 620rpx;
			height: 900rpx;
			margin: 68rpx auto;
			border-radius: 10px;
			background-color: #FFFFFF;

			.code {
				border-radius: 20rpx;
				padding-top: 60rpx;
			}

			.copy-btn {
				margin: 0 80rpx;
				height: 88rpx;
				@include background_linear(90deg, 0, 100%)
			}

			.phone {
				padding: 0 20rpx;
				text-decoration: underline;
			}
		}
	}
</style>